<template>
   <main>
        <div class="head">
            <div @click="back"><van-icon name="arrow-left" /></div>
            <div>投资理财</div>
            <div>···</div>
        </div>
        <div class="txt">
            <p>
                <span>上证指数</span>
                <span>2287.8</span>
            </p>
            <p>
                <span>-15.055</span>
                <span>-15%</span>
                <span>></span>
            </p>
        </div>
        <div id="banner">
      <van-swipe class="my-swipe" :autoplay="3000">
        <van-swipe-item
          v-for="(image, index) in images"
          :key="index"
          id="swipe"
        >
          <img v-lazy="image" />
        </van-swipe-item>
      </van-swipe>
    </div>
        <section>
            <div class="txt1">
                <p>
                    <span>首发优选</span>
                    <span>更多</span>
                </p>
                <div class="txt11">
                    <p>
                        <span>2022-10-32 9-30 开始招募</span>
                        <span>挂单</span>
                    </p>
                    <p>
                        <span>建信致远先锋混合A</span>
                        <span>+</span>
                    </p>
                    <p>
                        <span>混合型</span>
                        <span>中风险</span>
                        <span>10.00起购</span>
                    </p>
                </div>
                <div class="txt11">
                    <p>
                        <span>2022-10-32 9-30 开始招募</span>
                        <span>挂单</span>
                    </p>
                    <p>
                        <span>建信致远先锋混合A</span>
                        <span>+</span>
                    </p>
                    <p>
                        <span>混合型</span>
                        <span>中风险</span>
                        <span>10.00起购</span>
                    </p>
                </div>
            </div>
            <div class="txt2">
                <h3>盈系列</h3>
                <div>
                    <span>速银</span>
                    <span>2.004%</span>
                    <span>七日变化</span>
                </div>
            </div>
            <div class="txt3">
                <p>
                    <span>猜你喜欢</span>
                    <span>更多</span>
                </p>
                <div class="txt11">
                    <div class="txt111">
                        <div class="txt1111">
                            <p>
                                <span>建信致远先锋混合A</span>
                                <span>+</span>
                            </p>
                            <p>
                                <span>混合型</span>
                                <span>中风险</span>
                                <span>10.00起购</span>
                            </p>
                        </div>
                        <div class="txt1112">买入</div>
                    </div>
                    <div class="txt112">
                        <span><b>2</b>.0202%</span>
                        <span><b>2</b>.4548</span>
                    </div>
                    <div class="txt113">
                        <span>七日年化收益率</span>
                        <span>万分收益</span>
                    </div>
                </div>
                <div class="txt11">
                    <div class="txt111">
                        <div class="txt1111">
                            <p>
                                <span>建信致远先锋混合A</span>
                                <span>+</span>
                            </p>
                            <p>
                                <span>混合型</span>
                                <span>中风险</span>
                                <span>10.00起购</span>
                            </p>
                        </div>
                        <div class="txt1112">买入</div>
                    </div>
                    <div class="txt112">
                        <span><b>2</b>.0202%</span>
                        <span><b>2</b>.4548</span>
                    </div>
                    <div class="txt113">
                        <span>七日年化收益率</span>
                        <span>万分收益</span>
                    </div>
                </div>
            </div>
            <div class="txt4">
                <p>
                    <span>财富号</span>
                    <span>更多</span>
                </p>
                <div class="txt41">
                    <div class="txt411">
                        <div class="box_img">
                           <img src="@/assets/index/logo.jpeg" alt="" width="60px">
                        </div>
                        <div class="box_txt">
                            <p>建信基金财富号</p>
                            <p>
                                <span>建行子公司</span>
                                <span>权益爆款</span>
                                <span>固收实力强</span>
                            </p>
                        </div>
                    </div>
                    <div class="txt411">
                        <div class="box_img">
                            <img src="@/assets/index/logo.jpeg" alt="" width="60px">
                        </div>
                        <div class="box_txt">
                            <p>建信基金财富号</p>
                            <p>
                                <span>建行子公司</span>
                                <span>权益爆款</span>
                                <span>固收实力强</span>
                            </p>
                        </div>
                    </div>
                    <div class="txt411">
                        <div class="box_img">
                            <img src="@/assets/index/logo.jpeg" alt="" width="60px">
                        </div>
                        <div class="box_txt">
                            <p>建信基金财富号</p>
                            <p>
                                <span>建行子公司</span>
                                <span>权益爆款</span>
                                <span>固收实力强</span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="txt5">
                <p>
                    <span>咨询</span>
                    <span>更多</span>
                </p>
                <div class="box_img">
                    <img src="@/assets/index/zixin-0.jpg" alt="" width="400px" >
                </div>
                <div class="txt51">
                    <div class="txt511">
                        <span>美元异动|新城控股FEDRGR 4.625...</span>
                        <p>
                            <span>财汇</span>
                            <span>2022-10-07</span>
                        </p>
                    </div>
                    <div class="txt512">
                        <!-- 图片 -->
                    </div>
                </div>
                <div class="txt51">
                    <div class="txt511">
                        <span>美元异动|新城控股FEDRGR 4.625...</span>
                        <p>
                            <span>财汇</span>
                            <span>2022-10-07</span>
                        </p>
                    </div>
                    <div class="txt512">
                        <!-- 图片 -->
                    </div>
                </div>
            </div>
        </section>
    </main>
</template>

<script>
    import { FourMoney } from '@/apis/money';
export default {
    data() {
    return {
        str:[

        ],
      images: [
        "https://img01.yzcdn.cn/vant/apple-1.jpg",
        "https://img01.yzcdn.cn/vant/apple-2.jpg",
        "https://img01.yzcdn.cn/vant/apple-3.jpg",
        "https://img01.yzcdn.cn/vant/apple-4.jpg",
      ],
    };
  },
    created(){
        FourMoney().then((ok=>{
            console.log(ok.data);
            this.str=ok.data.data;
        }))
    },
    methods:{
        back(){
            this.$router.push("/money")
        }
    }
    
}
</script>

<style lang="scss">
* {
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
}

html,
body {
    display: flex;
    flex-direction: column;
}
.head{
    height: .3rem;
    width: 100%;
    font-size: .3rem;
    color: white;
    font-weight: bold;
    background-color: #136ab7;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
main {
    flex: 1;
    overflow-y: scroll;
    padding: 0 20px;
}

main nav {
    height: 250px;
}

main nav div {
    width: 25%;
    height: 50%;
    float: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

main nav div span:nth-child(1) {
    margin-bottom: 20px;
}

main .txt {
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    margin: 5px 0;
}

.swiper-container {
    width: 100%;
    height: 150px;
}

.swiper-container img {
    width: 100%;
    height: 100%;
}

main section {
    display: flex;
    flex-direction: column;
}

main section .txt1 {
    height: 244px;
    margin: 20px 0;
}

main section .txt1>p {
    display: flex;
    justify-content: space-between;
}

main section .txt1 .txt11 {
    height: 100px;
    margin: 10px 0;
    padding: 10px;
}

main section .txt1 .txt11 p:nth-child(1) {
    height: 25px;
    display: flex;
    justify-content: space-between;
}

main section .txt1 .txt11 p:nth-child(1) span:nth-child(2) {
    display: inline-block;
    padding: 2px 10px;
    font-size: 14px;
    border-radius: 5px;
}

main section .txt1 .txt11 p:nth-child(2) {
    display: flex;
    margin-top: 5px;
}

main section .txt1 .txt11 p:nth-child(2) span:nth-child(1) {
    font-weight: 900;
}

main section .txt1 .txt11 p:nth-child(2) span:nth-child(2) {
    width: 20px;
    height: 20px;
    margin-left: 10px;
    text-align: center;
    line-height: 20px;
    border-radius: 2px;
}

main section .txt1 .txt11 p:nth-child(3) span {
    display: inline-block;
    padding: 5px;
    color: blue;
    background-color: #bdbdbd;
    margin: 1px;
    font-size: 10px;
}

main section .txt2 div {
    width: 160px;
    height: 90px;
    background-color: #bdbdbd;
    margin: 10px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

main section .txt2 div span:nth-child(1) {
    margin: 5px 0;
    font-weight: 900;
}

main section .txt2 div span:nth-child(2) {
    color: red;
}

main section .txt2 div span:nth-child(3) {
    font-size: 10px;
}

main section .txt3 {
    height: 280px;
    margin: 20px 0;
}

main section .txt3>p {
    display: flex;
    justify-content: space-between;
}

main section .txt3 .txt11 {
    height: 110px;
    margin: 10px 0;
    padding: 10px;
}

main section .txt3 .txt111 {
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

main section .txt3 .txt111 .txt1111 p:nth-child(1) span:nth-child(2) {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-left: 10px;
    text-align: center;
    line-height: 20px;
    border-radius: 2px;
}

main section .txt3 .txt111 .txt1111 p:nth-child(2)>span {
    display: inline-block;
    padding: 5px;
    color: blue;
    background-color: #bdbdbd;
    margin: 1px;
    font-size: 10px;
}

main section .txt3 .txt111 .txt1112 {
    padding: 4px 10px;
    border: 1px solid blue;
    border-radius: 10px;
}

main section .txt3 .txt112 {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

main section .txt3 .txt112>span {
    color: red;
}

main section .txt3 .txt112>span b {
    font-size: 20px;
}

main section .txt3 .txt113 {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
}

main section .txt4 p {
    width: 100%;
    height: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

main section .txt4 p span:nth-child(1) {
    font-size: 20px;
    font-weight: 900;
}

main section .txt4 .txt41 .txt411 {
    padding: 20px 0;
    display: flex;
    border-bottom: 1px solid grey;
}

main section .txt4 .txt41 .txt411 .box_img {
    overflow: hidden;
    width: 60px;
    height: 60px;
    // background-color: red;
    margin-right: 20px;
}

main section .txt4 .txt41 .txt411 .box_txt p:nth-child(1) {
    font-weight: 900;
}

main section .txt4 .txt41 .txt411 .box_txt p:nth-child(2)>span {
    display: inline-block;
    font-size: 12px;
    font-weight: 400;
    padding: 5px 8px;
    background-color: rgb(33, 184, 58);
    margin-right: 10px;
}
main section .txt5{
    width: 100%;
}
main section .txt5>p{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 0;
}
main section .txt5 .box_img{
    overflow: hidden;
    height: 150px;
    width: 100%;
    background-color: #1a1;
}
main section .txt5 .txt51{
    margin: 20px 0;
    display: flex;
    width: 100%;
}
main section .txt5 .txt51 .txt511{
    display: flex;
    flex-direction: column;
    width: 65%; 
}
main section .txt5 .txt51 .txt511>span{
    width: 100%;
}
main section .txt5 .txt51 .txt511 p{
    margin: 10px 0;
    display: flex;
}
main section .txt5 .txt51 .txt511 p span:nth-child(1){
    padding: 3px 5px;
    background-color: #bdbdbd;
    font-size: 10px;
    color: blue;
}
main section .txt5 .txt51 .txt511 p span:nth-child(2){
    color: grey;
    font-size: 12px;
    margin: 3px 8px;
}
main section .txt5 .txt51 .txt512{
    width: 100px;
    height: 85px;
    margin-left: 20px;
}
#banner {
  width: 3.43rem;
  height: 0.8rem;
  overflow: hidden;
  margin-bottom: 0.1rem;
  #swipe {
    width: 100%;
    height: 0.8rem;
    float: left;
    img {
      width: 3.43rem;
      height: 0.8rem;
      z-index: 9999;
    }
  }
}
</style>